<template>
  <div class="months-grid">
    <template v-for="month in months" :key="month.value">
      <px-check-tag v-if="!month.disabled" :checked="selected.includes(month.value)" class="months-grid-item" @change="toggleMonth(month.value)">
        {{ month.label }}
      </px-check-tag>
      <px-check-tag v-else class="months-grid-item" disabled>
        {{ month.label }}
      </px-check-tag>
    </template>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
const emits = defineEmits(["monthChange"]);

// 使用 defineModel 处理 v-model 绑定的值
const selected = defineModel({
  selected: {
    type: Array,
    default: () => []
  }
});
const props = defineProps({
  type: {
    type: String,
    default: "YEAR"
  }
});
// 定义月份
const months = ref([
  { value: "1", label: "1月", disabled: false },
  { value: "2", label: "2月", disabled: false },
  { value: "3", label: "3月", disabled: false },
  { value: "4", label: "4月", disabled: false },
  { value: "5", label: "5月", disabled: false },
  { value: "6", label: "6月", disabled: false },
  { value: "7", label: "7月", disabled: false },
  { value: "8", label: "8月", disabled: false },
  { value: "9", label: "9月", disabled: false },
  { value: "10", label: "10月", disabled: false },
  { value: "11", label: "11月", disabled: false },
  { value: "12", label: "12月", disabled: false }
]);
watch(
  () => props.type,
  val => {
    if (val === "QUARTER" || val === "HALF_YEAR") {
      if (selected.value.length > 0) {
        months.value.forEach(el => {
          if (!selected.value.includes(el.value)) {
            el.disabled = true;
          }
        });
      } else {
        resetMonth();
      }
    } else {
      resetMonth();
    }
  },
  {
    immediate: true
  }
);
// 切换选中的月份
const toggleMonth = val => {
  if (props.type === "YEAR") {
    if (selected.value.includes(val)) {
      selected.value = selected.value.filter(v => v !== val);
    } else {
      selected.value.push(val);
    }
  } else if (props.type === "QUARTER") {
    if (selected.value.length === 0) {
      let res = handleQuarter(val);

      months.value.forEach(el => {
        if (!res.includes(el.value)) {
          el.disabled = true;
        }
      });
      selected.value = res;
    } else {
      selected.value = [];
      resetMonth();
    }
  } else if (props.type === "HALF_YEAR") {
    if (selected.value.length === 0) {
      let res = handleHalfYear(val);

      months.value.forEach(el => {
        if (!res.includes(el.value)) {
          el.disabled = true;
        }
      });
      selected.value = res;
    } else {
      selected.value = [];
      resetMonth();
    }
  }

  emits("monthChange", selected.value);
};
function resetMonth() {
  months.value.forEach(el => {
    el.disabled = false;
  });
}
function handleQuarter(quarterStr) {
  const num = parseInt(quarterStr, 10);
  if (isNaN(num) || num < 1 || num > 12) {
    return [];
  }
  const remainder = (num - 1) % 3;
  switch (remainder) {
    case 0:
      return ["1", "4", "7", "10"];
    case 1:
      return ["2", "5", "8", "11"];
    case 2:
      return ["3", "6", "9", "12"];
  }
}
function handleHalfYear(halfYearStr) {
  const num = parseInt(halfYearStr, 10);
  if (isNaN(num) || num < 1 || num > 12) {
    return [];
  }
  const remainder = (num - 1) % 6;
  switch (remainder) {
    case 0:
      return ["1", "7"];
    case 1:
      return ["2", "8"];
    case 2:
      return ["3", "9"];
    case 3:
      return ["4", "10"];
    case 4:
      return ["5", "11"];
    case 5:
      return ["6", "12"];
  }
}
</script>

<style scoped>
.months-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    padding: 0;
  }
}
</style>
